<template>
  <div class="flex flex-col w-full px-12">
    <!-- 上传 -->
    <div class="w-1/2 my-4">
      <Upload @finish="uploadFinish" />
    </div>

    <!-- 工具栏 -->
    <div class="flex">
      <Tip
        class="mr-4"
        text="数据存在本地SessionStorage中, 重新上传会覆盖之前的数据"
      >
        <ExclamationCircleOutlined :style="{ color: '#ee9900' }" />
      </Tip>

      <Tip v-if="has" class="mr-4" :text="`上一次保存时间：${dateTimeRef}`">
        <CarryOutOutlined :style="{ color: '#46bd87' }" />
      </Tip>
      <Tip v-else class="mr-4" text="暂无数据">
        <CarryOutOutlined :style="{ color: '#46bd87' }" />
      </Tip>

      <Tip text="清空数据">
        <CloseCircleOutlined :style="{ color: '#ff4d4f' }" />
      </Tip>
    </div>

    <div class="w-full mt-4">
      <Codemirror :code="apiFoxCode" mode="json" :height="750" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue';

  import Upload from '@/components/Upload.vue';
  import Codemirror from '@/components/Codemirror.vue';
  import Tip from '@/components/Tip.vue';
  import {
    ExclamationCircleOutlined,
    CarryOutOutlined,
    CloseCircleOutlined,
  } from '@ant-design/icons-vue';

  import { useData } from '@/hooks/useData';

  const { apiFoxCode, dateTimeRef, readLocal, clearLocal } = useData();

  // 读取数据
  function uploadFinish() {
    readLocal();
  }

  onMounted(() => {
    readLocal();
  });

  const has = computed(() => !!apiFoxCode.value);
</script>
